﻿<!DOCTYPE html>

<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0013)about:internet -->
<head>
    <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=5,6,7,8,9,10,11, chrome=1" />
    <title>ECharts</title>
    <style>
        #main {
            width: 97%;
            height: 97%;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="main" />
    <script src="echarts.js"></script>
    <script>
        myChart = echarts.init(document.getElementById('main'));

        option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            toolbox: {
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '',
                    type: 'gauge',
                    min: 0,
                    max: 100,
                    splitNumber: 10,
                    radius: '80%',
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 20,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    axisLabel: {
                        backgroundColor: 'auto',
                        borderRadius: 2,
                        color: '#eee',
                        padding: 3,
                        textShadowBlur: 2,
                        textShadowOffsetX: 1,
                        textShadowOffsetY: 1,
                        textShadowColor: '#222'
                    },
                    title: {
                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    },
                    detail: {
                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        formatter: function (value) {
                            value = (value + '').split('.');
                            value.length < 2 && (value.push('00'));
                            return ('00' + value[0]).slice(-2)
                                + '.' + (value[1] + '00').slice(0, 2);
                        },
                        fontWeight: 'bolder',
                        borderRadius: 3,
                        backgroundColor: '#444',
                        borderColor: '#aaa',
                        shadowBlur: 5,
                        shadowColor: '#333',
                        shadowOffsetX: 0,
                        shadowOffsetY: 3,
                        borderWidth: 2,
                        textBorderColor: '#000',
                        textBorderWidth: 2,
                        textShadowBlur: 2,
                        textShadowColor: '#fff',
                        textShadowOffsetX: 0,
                        textShadowOffsetY: 0,
                        fontFamily: 'Arial',
                        width: 100,
                        color: '#eee',
                        rich: {}
                    },
                    data: [{ value: 0, name: '' }]
                }
            ]
        };

        myChart.setOption(option);

        function jsShowHide(info) {
            if (info == 0) {
                myChart.clear();
            }
            else {
                myChart.setOption(option);
            }
        }

        function jsSetData(name, min, max, splitNumber, label, value) {

            option.series[0].name = name;
            option.series[0].min = min;
            option.series[0].max = max;
            //option.series[0].splitNumber = splitNumber;//这个不能单纯设置他
            var data = {};
            data.name = label;
            data.value = value;
            option.series[0].data[0] = data;
            myChart.setOption(option);
        }

        function jsSetValue(value) {
            option.series[0].data[0].value = value;
            myChart.setOption(option, true);
        }

        function jsSetSize(x, y) {
            var main = document.getElementById('main')
            main.style.width = x + "px"
            main.style.height = y + "px"
            myChart.resize({ width: x, height: y });
        }

        function click1() {
            //var main = document.getElementById('main')
            //main.style.width = "500px"
            //main.style.height = "500px"
            //myChart.resize({ height: 500, width:500 });
            window.external.ShowMsg("这是一条信息,来自js，调用了C#");
        }

    </script>
</body>
</html>